<template>
  <el-button
    :type="modelData?.color === '' ? modelData?.types : ''"
    :size="modelData?.size"
    :text="modelData?.isText"
    :round="modelData?.isRound"
    :plain="modelData?.isPlain"
    :circle="modelData?.isCircle"
    :color="modelData?.color"
  >
    <template #icon v-if="modelData?.icon !== ''">
      <el-icon :color="modelData?.textColor"
        ><component class="icons" :is="modelData?.icon"></component
      ></el-icon>
    </template>
    <span
      v-if="buttonName === '' || buttonName === undefined"
      :style="{ color: modelData?.textColor }"
      >{{ modelData?.buttonStyleName }}</span
    >
    <span v-else :style="{ color: modelData?.textColor }">{{
      buttonName
    }}</span>
  </el-button>
</template>
  
  <script lang="ts">
import { defineComponent, PropType } from "vue";
export default defineComponent({
  props: {
    modelData: {
      type: Object as PropType<any>,
      required: true,
    },
    buttonName: {
      type: String,
    },
  },

  setup(props, context) {
    return {};
  },
  components: {},
});
</script>
  <style scoped>
</style>